<!DOCTYPE html>
<html class="no-js" lang="">

<head>
    #include( "/public-head.html")
</head>

<body style="background-color: #ffffff !important;">
<!-- main area -->
<div class="main-content checkbo">
    <div class="panel mb25">
        <div class="panel-heading border">
            #if($!{detail.id}) 修改#else 添加#end视频OTT详情页
        </div>
        <div class="panel-body">
            <div class="row no-margin">
                <div class="col-lg-12">
                    <form action="/vrs/detail/edit.jsn" id="commentForm" method="post" name="ajaxForm" class="form-horizontal bordered-group video-detail-form" role="form">
                        <input name="terminal" value="1" class="hidden" />
                        <textarea name="data" class="hidden">$!{detail.data}</textarea>
                        <input name="isdisplay" value="1" class="hidden" />
                        <div class="form-group">
                            <label class="col-sm-2 control-label">id</label>
                            <div class="col-sm-10">
                                <input type="text" name="id"  value="$!{detail.id}" class="hidden" >
                                <input type="text"  class="form-control w100" value="$!{detail.id}" placeholder="id" disabled="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属专辑<code>*</code></label>
                            <div class="col-sm-10">
                                <input type="text" name="albumId"   value="$!{albumId}" class="hidden">
                                <input type="text"  class="form-control w100" value="$!{albumId}" placeholder="专辑id" disabled="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">背景图片</label>
                            <div id="wxDiv" class="col-sm-10" data-theme-name="upload-image">
                                <div   class="pull-left" >
                                    <div class="pull-left mr10">
                                        <!--<img src="/images/upload_1242x416.jpg" width="248" height="82">-->
                                        <label data-theme-name="upload-image-label">
                                            <img src="/images/upload_1242x416.jpg" name="img" data-id="sub-image" data-theme-name="view-image" width="248" height="82">
                                            <img src="/images/wait.gif" width="40" height="40" data-theme-name="wait-image" >
                                            <input type="file" name="image"  />
                                            <input name="root" value="detail" style="display: none"  />
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">单场信息</label>
                            <div id="videoDetail" class="col-sm-10" data-theme-name="upload-image">
                                <div  data-theme-name="upload-image-div" class="pull-left" >
                                    <div class="pull-left mr10">
                                        <!--<input type="text"  class="form-control w100" placeholder="配置"  disabled="">-->
                                        <button type="button" class="btn btn-default w100" data-toggle="modal" data-target=".video-detail-ott">配置<input  class="hidden data-json" /></button>
                                        <br>
                                        <button type="button" class="btn btn-danger" data-theme-name="remove-upload-image" >删除</button>
                                    </div>
                                    <!--<div class="pull-left mr10">
                                        <div data-toggle="modal" data-target=".video-detail-ott" class="pull-left">
                                            <img src="/images/upload_1242x416.jpg"  width="248" height="82">
                                            <input  class="hidden data-json" />
                                        </div>
                                    </div>-->
                                </div>
                                <div class="pull-left mr10">
                                    <button type="button" class="btn btn-primary" data-theme-name="add-upload-image" style="height: 82px;;" >添<br/>加</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">详情</label>
                            <div  class="col-sm-10">
                                <div class="summernote w500" id="detailText" data-theme-name="detailHtml"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="description"  name="description" rows="3">$!{detail.description}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label></label>
                            <div>
                                <button type="submit" class="btn btn-primary mr10">#if($!{detail.id}) 修改#else 添加#end</button>
                                <button type="button" class="btn btn-primary mr10 detail-ott-preview" data-toggle="modal" data-target=".video-detail-ott-preview">预览</button>
                                <button class="btn btn-default">返回</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>


</div>
<!-- /main area -->
#parse("/vrs/cms/videoDetail/preview/video-detail-ott-modal.html")
#parse("/vrs/cms/videoDetail/preview/preview-modal-ott.html")
#include( "/public-script.html")
#include( "/sub-script.html")
<script>
    $(function(){
        initEditVideoDetail('$!{detail.data}')
    });


var videoHtml = $('div[data-theme-name="upload-image-div"]:first').clone().prop('outerHTML');
    function initEditVideoDetail(data){
        console.log(data);
        if(data == ''){
            return ;
        }
        data = $.evalJSON(data);
        console.log(data);
        $('#detailText').next().find('.note-editable').html(decodeURIComponent(data.detailHtml));
        $('img[name="img"]').attr('src',data.img);


        var $addBut = $('[data-theme-name="add-upload-image"]').parent();
        $.each(data.data,function(i,item){
//            var img = item.img;
            var json = $.toJSON(item);
            var $video = $(videoHtml);
            console.log($video);
            $video.find('.data-json').val(json);
//            $video.find('img').attr('src',img);
            $video.css({"display":"black"});
            initUploadImageRemove($video.find('[data-theme-name="remove-upload-image"]'));
            initOpenModal($video.find('[data-toggle="modal"]'));
            $addBut.before($video);
        });
        initUploadImageCss();
        $('div[data-theme-name="upload-image-div"]:first').remove();

    }



    function getDetailData($form){

        var data = $form.serializeArray();
        console.log(data);
        var jsonHtml = '{';
        $.each(data,function(i,item){
            if(item.name != 'root'&& item.name != 'terminal' && item.name != 'data' && item.name != 'description'
                    && item.name != 'id' && item.name != 'isdisplay' && item.name != 'albumId' ){

                jsonHtml = jsonHtml+ '\"'+item.name+'\":\"'+item.value+'\",'
            }
        })
        $('[data-id="sub-image"]').each(function(){
            var $this = $(this);
            jsonHtml = jsonHtml+ '\"'+$this.attr('name')+'\":\"'+$this.attr('src')+'\",'
        });
        $('.summernote').each(function(){
            var $this = $(this);
            var $textDiv = $this.next().find('.note-editable');
            jsonHtml = jsonHtml+ '\"'+$this.data('theme-name')+'\":\"'+encodeURIComponent($textDiv.html())+'\",'
        });
        var array = new Array();
        $('.data-json').each(function(i){
            var $this= $(this);
            var thisVal = $this.val();
            if(thisVal != ''){
                array[i] = $this.val();
            }
        });
        jsonHtml = jsonHtml+ '\"data\":['+array+']';
//        jsonHtml = jsonHtml.substring(0,jsonHtml.lastIndexOf(','));encodeURIComponent   decodeURIComponent
        jsonHtml = jsonHtml + '}';
        console.log(jsonHtml);
        return jsonHtml;
    }


</script>
</body>

</html>
